<!--  -->
<template>
  <div>
    <header class="header">
      <Nav />
    </header>
    <div class="main">
      <div class="content">
        <Breadcrumb></Breadcrumb>
        <Content></Content>
      </div>
      <div class="rightSide">
        <RightSide></RightSide>
      </div>
    </div>
    <footer class="footer">
      <Footer>122</Footer>
    </footer>
  </div>
</template>

<script>

import Nav from "./Nav/Nav.vue";
import Content from "./content/Content";
import Breadcrumb from "./content/Breadcrumb.vue";
import Footer from "./footer/Footer.vue";
import RightSide from "./Side/RightSide.vue";

export default {
  name: "Main",
  data() {
    return {
      articlePage: {},
      currentComponent: {},
      isAnime: false,
      isAMenu: false,
    };
  },

  components: {
    Nav,
    Content,
    Breadcrumb,
    Footer,
    RightSide,
  },

  computed: {},
  created() {
    // 1.每次都重新加载组件，会有两次初始化，且每次切换到该组件都会重新提交一个实例
    // let Constuctor = Vue.extend(Content);
    // let newComp1 = new Constuctor();
    // this.currentComponent = newComp1.$options
    // 2.必要时才重新加载数据

   
  },
  methods: {
    animeClick() {
      console.log("click");
      if (!this.isAnime) {
        this.isAnime = true;
        this.$anime({
          targets: ".rightSide",
          translateX: 250,
          // translateY: 250,
          scale: 0.1,
          rotate: 360,
          duration: 1000,
        });
      } else {
        this.isAnime = false;
        this.$anime({
          targets: ".rightSide",
          translateX: 0,
          // translateY: 0,
          scale: 1,
          rotate: 0,
          duration: 1000,
        });
      }
    },
  },
};
</script>
<style lang="scss"  scoped>
@import "@/assets/scss/theme.scss";
// @import "../../assets/css/common.css";
// cssloader不能解释@为src
.header {
  height: 100px;
  -moz-user-select: none;
  -webkit-user-select: none;
  background-color: $body-background-color;
}
.main {
  background-color: $body-background-color;
  clear: both;
}

.content {
  display: inline-block;
  width: 50%;
  background-color: $main-background-color;
}
.rightSide {
  display: inline-block;
  vertical-align: top;
  width: 20%;
}
.footer {
  background-color: black;
  clear: both;
}
</style>